#{extends 'main_adm.html' /}
#{set title:'Cadastro Adm' /}
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <title>Cadastro</title>
  <meta name="author" content="Jake Rocheleau">
  
  <link rel="stylesheet" type="text/css" media="all" href="@{'public/stylesheets/main.css'}">
  <link rel="stylesheet" type="text/css" media="all" href="@{'public/stylesheets/form_style.css'}">
  <link rel="stylesheet" type="text/css" media="all" href="@{'public/stylesheets/form_responsive.css'}">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
   
  <script type="text/javascript" src="@{'public/javascripts/jquery.min.js'}"></script>
  <script type="text/javascript" src="@{'public/javascripts/jquery.maskedinput-1.3.min.js'}"></script>
  <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script> 

<style>
.ui-datepicker {
font-size: 120%; color:#FFF; width:16%; margin-left:500px; background:#363636;}
</style>
   
</head>

<body>

	<section id="container">

		<h2>Cadastro - administrador</h2>
        
        	#{ifErrors}
			<h1>Ops...Alguns erros foram encontrados</h1>
			#{/ifErrors}
			
        
		#{form @salvarCadastro(), name:'form_cadastro', id:'form_cadastro'}
    
		<div id="wrapping" class="clearfix">
			<section id="aligned">
            <h3>Dados Pessoais:</h3>
       
			
		    #{field 'administrador.nome'}
		        <p class="${field.errorClass}">
		            <input type="text" name="${field.name}" value="${administrador?.nome}" id="nome" placeholder="Nome" autocomplete="off" tabindex="1" class="txtinput" required>
		            <span class="error">${field.error}</span>
		        </p>
		    #{/field}   
		          
            
		     #{field 'administrador.dataNascimento'}
		        <p class="${field.errorClass}">
		            <input type="text" name="${field.name}" value="${administrador?.dataNascimento}" id="data" placeholder="Data de Nascimento: dd/mm/aaaa" autocomplete="off" tabindex="2" class="txtinput" required>
		            <span class="error">${field.error}</span>
		        </p>
		    #{/field} 		
			
		    #{field 'administrador.telefone1'}
		        <p class="${field.errorClass}">
		            <input type="tel" name="${field.name}" value="${administrador?.telefone1}"  id="telefone1" placeholder="Telefone(1): (ddd)xxxx-xxxx" tabindex="3" class="txtinput" required>
		            <span class="error">${field.error}</span>
		        </p>
		    #{/field}            
            
		    #{field 'administrador.telefone2'}
		        <p class="${field.errorClass}">
		            <input type="tel" name="${field.name}" value="${administrador?.telefone2}"  id="telefone2" placeholder="Telefone(2)" tabindex="4" class="txtinput"> 
		            <span class="error">${field.error}</span>
		        </p>
		    #{/field}            
            
		    #{field 'administrador.email'}
		        <p class="${field.errorClass}">
		            <input type="email" name="${field.name}" value="${administrador?.email}" id="email" placeholder="Endereço de E-Mail: (ex.)xxx@xxx.com" autocomplete="off" tabindex="5" class="txtinput" required>
		            <span class="error">${field.error}</span>
		        </p>
		    #{/field}     
		    
		    #{field 'administrador.cpf'}
		        <p class="${field.errorClass}">
		            <input type="text" name="${field.name}" value="${administrador?.cpf}" id="cpf" placeholder="CPF: (ex) 000.000.000-00" autocomplete="off" tabindex="5" class="txtinput" required>
		            <span class="error">${field.error}</span>
		        </p>
		    #{/field}         
            
		    #{field 'administrador.tipo'}
		        <p class="${field.errorClass}">
		            <input type="text" name="${field.name}" value="${administrador?.tipo}" id="funcao" placeholder="Função: (ex)Dona, venderora, etc." autocomplete="off" tabindex="6" class="txtinput">
		            <span class="error">${field.error}</span>
		        </p>
		    #{/field}           
		
			</section>
	
			<section id="aside" class="clearfix">
				<section id="recipientcase">
				<h3>Conta de Usuário:</h3>
                
                
			    #{field 'administrador.usuario'}
			        <p class="${field.errorClass}">
			            <input type="text" name="${field.name}" value="${administrador?.usuario}" id="usuario" placeholder="Usuário" autocomplete="off" tabindex="7" class="txtinput" required>
			            <span class="error">${field.error}</span>
			        </p>
			    #{/field}             
                
			    #{field 'administrador.senha'}
			        <p class="${field.errorClass}">
			            <input type="password" name="${field.name}" value="${administrador?.senha}" id="senha" placeholder="Senha" autocomplete="off" tabindex="8" class="txtinput" required>
			            <span class="error">${field.error}</span>
			        </p>
			    #{/field}                
              
                
			    #{field 'confirmaSenha'}
			        <p class="${field.errorClass}">
			            <input type="password" name="${field.name}" value="${confirmaSenha}" id="senha" placeholder="Confirmar Senha" autocomplete="off" tabindex="9" class="txtinput" required oninput="check(this)">
                        <span class="error">${field.error}</span>
			        </p>
			    #{/field}					
				</section>
				
			</section>
		</div>


		<section id="buttons">
			<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Limpar">
			<input type="submit" name="submit" id="submitbtn" class="submitbtn" tabindex="7" value="Enviar">
			<br style="clear:both;">
		</section>
		#{/form}
	</section>
	


</body>
</html>

<script>
$(function(){
$("#data").datepicker({
    dateFormat: 'dd/mm/yy',
        dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
        dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
        dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
        monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
        monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
    });
});
</script>

<script>
	$(document).ready(function(){
		$("#data").mask("99/99/9999");
		$("#telefone1").mask("(99)9999-9999");
		$("#telefone2").mask("(99)9999-9999");
		$("#cpf").mask("999.999.999-99");
		
	});
</script>

<script>
function check(senha) {
  if (senha.value != document.getElementById('senha').value) {
    senha.setCustomValidity('As senhas não estão combinando.');
  } else {
    // input is valid -- reset the error message
    senha.setCustomValidity('');
  }
}

</script>

